<template>
  <div>
    <Collapse value="0" accordion>
      <Panel :name="`${i}`"  v-for="(item, i) in tableData" :key="i">
        <Div :gutter="2" style="display:inline-flex;align-items: center">
<!--          <Button size="small" style="margin-right: 10px" @click="delRow(i)">-</Button>-->
<!--          <Button size="small" v-if="i === tableData.length-1" @click="addRow">+</Button>-->
          <span>{{`字段属性:  ${tableData[i].find(item=>item.name==='dataIndex').defaultValue}`}}</span>
        </Div>
        <Table ref="table" :columns="columns" :data="tableData[i]" slot="content">
          <template slot-scope="{ row, index }" slot="defaultValue">
            <fieldCell
                v-model="tableData[i][index].defaultValue"
                :config="{ editor: tableData[i][index].valueType, options: tableData[i][index].options,filterable:tableData[i][index].filterable }"
                @change="updateRow(i,tableData[i][index].name,$event)"
            ></fieldCell>
          </template>
          <template slot-scope="{ row, index }" slot="showField">
            <Checkbox v-model="tableData[i][index].showField"></Checkbox>
          </template>
        </Table>
      </Panel>
    </Collapse>
  </div>
</template>

<script>
    import fieldCell from './fieldCell';
    import storeVar from "../../mixins/storeVar";
    export default {
        name:'tableTreeList',
        components: { fieldCell },
        mixins:[storeVar],
        props: {
            tableData: {
                default: () => {
                    return [];
                }
            }
        },
        data () {
            return {
                fieldsList: [{ isCollapse: false }],
                columns: [
                    {
                        key: 'name',
                        title: '属性名称',
                        minWidth: 100,
                        align: 'center'
                    },
                    {
                        key: 'defaultValue',
                        title: '默认值',
                        minWidth: 100,
                        align: 'center',
                        slot: 'defaultValue'
                    },
                    {
                        key: 'showField',
                        title: '是否使用',
                        minWidth: 100,
                        align: 'center',
                        slot: 'showField'
                    }
                ]
            };
        },
        methods: {
            addRow () {
                this.compGroup.currentClassObject.addField();
                this.fieldsList.push({ isCollapse: false })
              this.syncGroup();
            },
            delRow (index) {
              this.compGroup.currentClassObject.deleteField(index);
                this.$delete(this.fieldsList, index)
              this.syncGroup();
            },
            updateRow(index,name,value){
                if(name==='type'){
                  this.compGroup.currentClassObject.changeEditor(index,value)
                }else{
                  let field=this.compGroup.currentClassObject.property.fields[index];
                  field[name]=value;
                }
              this.syncGroup();
            }
        },
        watch: {
            tableData (data) {
                this.fieldsList = []
                this.tableData.forEach(d => {
                    this.fieldsList.push({ isCollapse: false })
                })
            }
        },
        mounted () {
            this.fieldsList = []
            this.tableData.forEach(d => {
                this.fieldsList.push({ isCollapse: false })
            })
        }
    };
</script>
<style scoped lang="scss">

</style>
